<div class="composer border-bottom">
    <div class="d-flex py-1 px-3">
        <img class="avatar" src="/img/avatar.png" alt="">
        <div class="flex-fill">
            <form id="post-form" method="POST" enctype="multipart/form-data">
                <textarea class="form-control border-0 px-0 js-textarea-item" name="content" id="content" maxlength="200" spellcheck="false" placeholder="良言一句三冬暖，恶语伤人六月寒" required autofocus></textarea>
                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
                <input type="file" class="d-none" name="files[]" id="files" accept="image/png,image/jpeg,image/gif">
                <div class="composer-action d-flex justify-content-between align-items-center mb-2">
                    <?= mini\Template::partial('partials/_post_toolbar') ?>
                    <div>
                        <span class="textarea-count" id="counter">200</span>
                        <?php if ($user->golds <= 0) : ?>
                            <button type="button" class="btn btn-primary fw-bold" disabled>金币不足</button>
                        <?php else : ?>
                            <button type="button" id="submitButton" class="btn btn-primary fw-bold" disabled>发帖</button>
                            <!-- <button type="submit" class="btn btn-primary fw-bold rounded-pill">发帖</button> -->
                        <?php endif; ?>
                    </div>
                </div>
            </form>
            <div>
                <img class="previewImg img-fluid rounded mb-2" id="previewImg">
            </div>
        </div>
    </div>
</div>

<script>
/**
 * 预览要上传的图片
 */
const fileEle    = document.getElementById('files');
const previewEle = document.getElementById('previewImg');

// 默认隐藏预览区
previewEle.style.display = 'none';

fileEle.addEventListener('change', function (e) {
    // 获取所选文件
    const file = e.target.files[0];
    // 创建引用文件的新URL
    const url = URL.createObjectURL(file);
    previewEle.src = url;
    // 显示预览区
    previewEle.style.display = '';
});

/**
 * 计算剩余字符数
 */
const contentEle = document.getElementById('content');
const counterEle = document.getElementById('counter');
contentEle.addEventListener('input', function (e) {
    const target = e.target;
    const maxLength = 200;
    // 计算当前的字符数
    const currentLength = getStringLength(target.value);
    counterEle.innerHTML = Math.floor(maxLength - currentLength);
});
</script>